<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>希德小站</title>
    <style>
      /* 这里是全局 */
      body {
        background-color: rgb(246, 246, 246);
      }
      a {
        text-decoration: none;
        color: black;
        border: none;
      }

      /* 这里是类 */
      .flex {
        display: flex;
      }
      .col {
        flex-direction: column;
      }
      .daoHang {
        font-size: 18px;
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }
      .baiSe {
        background-color: white;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
          rgba(17, 17, 26, 0.1) 0px 0px 8px;
      }
      .con_title1 {
        font-size: 30px;
        color: rgb(71, 71, 71);
        margin-top: 60px;
        margin-bottom: 10px;
      }
      .data_num {
        font-size: 60px;
        color: #3f66f6;
      }
      .data_num_danwei {
        font-size: 22px;
        color: #3f66f6;
        line-height: 20px;
      }
      .con_title2 {
        font-size: 15px;
        font-weight: lighter;
        color: #7d7d7e;
      }
      .con_title3 {
        font-size: 20px;
        font-weight: normal;
        color: #2121ad;
        margin-top: 35px;
        margin-bottom: 25px;
      }
      /* 这里是伪类选择器 */
      div > a:hover {
        color: #ffffff;
        font-weight: bold;
        background-color: #3f66f6;
        border-radius: 10%;
      }

      /* 这里是id */
      #jindushuzi {
        font-size: 18px;
        width: 130px;
        height: 40px;
        text-align: center;
        line-height: 40px;
      }

      /* 这里是文章悬浮窗css */
      .card {
        width: 28rem;
        cursor: pointer;
        margin-top: 30px;
        margin-left: 10px;
        margin-right: 10px;
        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
          rgba(17, 17, 26, 0.1) 0px 0px 8px;
      }

      .content {
        text-align: center;
        position: relative;
        transition: all 2.25s;
        background-color: rgb(255, 255, 255);
        padding: 5em;
        transform-style: preserve-3d;
      }

      .card:hover .content {
        transform: rotateY(0.5turn);
      }

      .front,
      .back {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 2em;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }

      .title {
        transform: translateZ(5rem);
        font-size: 18px;
      }

      .subtitle {
        transform: translateZ(2rem);
      }

      .back {
        transform: rotateY(0.5turn);
        background-color: #3f66f6;
      }

      .description {
        transform: translateZ(3rem);
      }

      /* 这是进度条的css */
      .loader {
        display: inline-block;
        width: 190px;
        height: 10px;
        border-radius: 40px;
        background-color: rgba(255, 255, 255, 1);
        position: relative;
        overflow: hidden;
      }

      .loader span {
        font: 700 22px monospace;
        text-transform: uppercase;
        margin: auto;
        color: #fff;
        letter-spacing: 5px;
      }

      .loader::before {
        content: "";
        position: absolute;
        top: 0;
        left: -50px;
        width: 150%;
        height: 100%;
        background-image: linear-gradient(332deg, #577cff, #809afa);
        border-radius: inherit;
        transform: scaleX(0);
        transform-origin: left;
        animation: load5123 2s infinite;
      }

      @keyframes load5123 {
        50% {
          transform: scaleX(1);
        }

        100% {
          transform: scaleX(0);
          transform-origin: right;
        }
      }

      /* 亲生产品效果 */
      #border-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30vh;
      }

      button {
        border: 0;
        border-radius: 10px;
        background: #ffffff;
        text-transform: uppercase;
        color: #2e56c4;
        font-size: 16px;
        font-weight: bold;
        padding: 15px 30px;
        outline: none;
        position: relative;
        transition: border-radius 3s;
        -webkit-transition: border-radius 3s;
      }

      button:hover {
        border-bottom-right-radius: 50px;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
      }

      /* 这里是右侧悬浮窗 */
      .fk_service {
        max-height: 232px;
        position: fixed;
        right: 10px;
        top: 40%;
        /* 垂直位置 */
        font-family: "微软雅黑";
        font-size: 14px;
        color: #243558;
        z-index: 10000
    }

    .fk_service ul {
        margin: 0;
        padding: 0;
        position: absolute;
        right: 0
    }

    .fk_service li {
        list-style-type: none
    }

    .fk_service li>div {
        box-sizing: border-box;
        box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    }

    .fk_service_box {
        width: 40px;
        height: 40px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1)
    }

    .fk_service_triangle {
        top: 12px;
        right: -11px;
        position: absolute;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 11px solid #e1e6ec;
        z-index: 1010
    }

    .fk_service_triangle:after {
        content: "\20";
        top: -6px;
        right: 1px;
        position: absolute;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid #fff;
        z-index: 1000
    }

    .fk_service_triangle:before {
        content: "\20";
        width: 80px;
        height: 45px;
        top: -20px;
        right: -52px;
        position: absolute;
        background: rgba(0, 0, 0, 0)
    }

    @keyframes fade-in {
        0% {
            opacity: .4;
            right: 82px
        }

        100% {
            opacity: 1;
            right: 62px
        }
    }

    .fk_service_consult {
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -366px -16px #fff
    }

    .fk_service_consult:hover {
        border: 0;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -410px -16px #4f7cfc
    }

    .fk_service_consult:hover .fk_service_consult_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_consult_cont {
        width: 200px;
        min-height: 210px;
        max-height: 268px;
        border-radius: 3px;
        background: #fff;
        right: 62px;
        position: absolute;
        text-align: center;
        border: 1px solid #e1e6ec;
        display: none;
        opacity: 0
    }

    .fk_service_consult_cont1 {
        width: 70px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    .fk_service_consult_cont1 .fk_service_triangle:before {
        width: 0 !important
    }

    .fk_service_consult_cont>.fk_service_triangle:after {
        border-left: 10px solid #f6f8fb !important
    }

    .fk_service_consult_cont span {
        float: left
    }

    .fk_service_consult_cont_top {
        width: 100%;
        height: 157px;
        background: #f6f8fb;
        border-radius: 3px;
        border-bottom: 1px solid #eef2f8
    }

    .fk_service_hint {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 12px;
        color: #9aa8c2;
        text-align: center
    }

    .fk_service_hint>.fk_service_icon {
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -460px -25px;
        width: 15px;
        height: 15px;
        margin: 13px 2px 0 18px
    }

    .fk_service_button {
        width: 160px;
        height: 38px;
        line-height: 38px;
        background: #4f7cfc;
        border-radius: 18px;
        text-align: center;
        color: #fff;
        margin: 5px 0 10px 20px;
        cursor: pointer
    }

    .fk_service_button:hover {
        background: #618aff
    }

    .fk_service_phone {
        width: 100%;
        height: 53px;
        line-height: 53px;
        font-size: 14px;
        text-align: center
    }

    .fk_service_check_site {
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #3b6bf4;
        border-top: 1px solid #eaeef5;
        cursor: pointer
    }

    .fk_service_check_site>.fk_service_icon {
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -461px -75px;
        width: 20px;
        height: 20px;
        margin: 15px 2px 0 45px
    }

    .fk_service_feedback {
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -363px -64px #fff
    }

    .fk_service_feedback:hover {
        border: 0;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -407px -64px #4f7cfc;
        cursor: pointer
    }

    .fk_service_feedback:hover .fk_service_feedback_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_feedback_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    .fk_service_qr {
        background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -365px -113px #fff
    }

    .fk_service_qr:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -409px -113px #4f7cfc
    }

    .fk_service_qr:hover .fk_service_qr_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_qr_cont {
        width: 143px;
        height: 202px;
        border-radius: 3px;
        background: #fff;
        right: 62px;
        position: absolute;
        text-align: center;
        border: 1px solid #e1e6ec;
        background-color: #f6f8fb;
        display: none;
        opacity: 0
    }

    .fk_service_qr_cont>.fk_service_triangle:after {
        border-left: 10px solid #f6f8fb !important
    }

    .fk_service_qr_cont>.fk_service_qrimg {
        width: 100%;
        height: 164px;
        float: left
    }

    .fk_service_qrimg_site {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -41px -26px;
        background-position: center;
        background-size: 100%;
    }

    .fk_service_qrimg_hd {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -198px -26px
    }

    .fk_service_qrimg_wxast {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(../image/fk_service.png?v=201905151200) no-repeat -198px -328px
    }

    .fk_service_qrimg_flyer {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -41px -177px
    }

    .fk_service_qrimg_wxapp {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -198px -177px
    }

    .fk_service_qrimg_fkmall {
        width: 119px;
        height: 119px;
        float: left;
        margin: 12px 12px 5px 12px;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -41px -326px
    }

    .fk_service_qr_cont>.fk_service_qrtext {
        width: 100%;
        height: 35px;
        font-size: 12px;
        color: #7b89a6;
        background-color: #fff;
        float: left;
        bottom: 0;
        display: table
    }

    .fk_service_qr_cont>.fk_service_qrtext>span {
        display: table-cell;
        vertical-align: middle
    }

    .fk_service_upward {
        display: none;
        background: url(https://a-oss.zmki.cn/2019/20190827-5d652476ab305.png) no-repeat -363px -159px #fff
    }

    .fk_service_upward:hover {
        border: 0;
        background: url(https://img1.imgtp.com/2022/12/11/6CD9Ki9s.jpg) no-repeat -407px -159px #4f7cfc;
        cursor: pointer
    }

    .fk_service_upward:hover .fk_service_upward_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_upward_cont {
        width: 84px;
        height: 40px;
        line-height: 40px;
        border-radius: 3px;
        background: #fff;
        right: 62px;
        position: absolute;
        text-align: center;
        border: 1px solid #e1e6ec;
        display: none;
        opacity: 0
    }

    .fk_service_upward_cont span {
        font-size: 14px
    }
    /* ----------------------------------------------------------------------- */
    /* 新增图标->zmki 开始*/
    .fk_service_jk {
        /* 前景图标 */
        background: url(https://a-oss.zmki.cn/2019/20191218-c9feba3074fcf.png) no-repeat center center #fff;
        background-size: 40%40%;
    }

    .fk_service_jk:hover {
        border: 0;
        /* 鼠标悬浮图标 */
        background: url(https://a-oss.zmki.cn/2019/20191218-9e8acd5341cdc.png) no-repeat center center #4f7cfc;
        background-size: 40%40%;
        cursor: pointer
    }

    .fk_service_jk:hover .fk_service_jk_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_jk_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /* 新增图标->zmki 结束*/

    /* 新增图标->zmki 开始*/
    .fk_service_ws {
        background: url(https://a-oss.zmki.cn/2019/20191218-61b4baac98ee7.png) no-repeat center center #fff;
        background-size: 50%50%;
    }

    .fk_service_ws:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20191218-8ded04c01bb3c.png) no-repeat center center #4f7cfc;
        background-size: 50%50%;
        cursor: pointer
    }

    .fk_service_ws:hover .fk_service_ws_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_ws_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /* 新增图标->zmki 结束*/

    /* 闪电 新增图标->zmki 开始*/
    .fk_service_sd {
        background: url(https://a-oss.zmki.cn/2019/20191218-94664bd399372.png) no-repeat center center #fff;
        background-size: 50%50%;
    }

    .fk_service_sd:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20191218-fab840acee28b.png) no-repeat center center #4f7cfc;
        background-size: 50%50%;
        cursor: pointer
    }

    .fk_service_sd:hover .fk_service_sd_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_sd_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /*闪电 新增图标->zmki 结束*/

    /* 导航 新增图标->zmki 开始*/
    .fk_service_dh {
        background: url(https://a-oss.zmki.cn/2019/20191218-711bcdc875f32.png) no-repeat center center #fff;
        background-size: 60%60%;
    }

    .fk_service_dh:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20191218-8d9cf4c72a239.png) no-repeat center center #4f7cfc;
        background-size: 60%60%;
        cursor: pointer
    }

    .fk_service_dh:hover .fk_service_dh_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_dh_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /*导航 新增图标->zmki 结束*/

    /* 爱心 新增图标->zmki 开始*/
    .fk_service_ax {
        background: url(https://a-oss.zmki.cn/2019/20191218-bf1792e790a39.png) no-repeat center center #fff;
        background-size: 40%40%;
    }

    .fk_service_ax:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20191218-f379809ce7aef.png) no-repeat center center #4f7cfc;
        background-size: 40%40%;
        cursor: pointer
    }

    .fk_service_ax:hover .fk_service_ax_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_ax_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /*爱心 新增图标->zmki 结束*/

    /* 点赞 新增图标->zmki 开始*/
    .fk_service_dz {
        background: url(https://a-oss.zmki.cn/2019/20191218-3d077e8df0bf0.png) no-repeat center center #fff;
        background-size: 50%50%;
    }

    .fk_service_dz:hover {
        border: 0;
        background: url(https://a-oss.zmki.cn/2019/20191218-986a9393f3e9e.png) no-repeat center center #4f7cfc;
        background-size: 50%50%;
        cursor: pointer
    }

    .fk_service_dz:hover .fk_service_dz_cont {
        display: block;
        opacity: 1;
        transition: linear .2s;
        animation-name: fade-in;
        animation-duration: .3s;
        animation-iteration-count: 1;
        animation-delay: 0s
    }

    .fk_service_dz_cont {
        width: 264px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        border-radius: 5px;
        right: 62px;
        text-align: center;
        position: absolute;
        display: none;
        border: 1px solid #e1e6ec
    }

    /*点赞 新增图标->zmki 结束*/

        /* 手机端自动隐藏 开始 */
    @media screen and (max-width: 1221px) { .wapnone{display:none; }
    }
    /* 手机端自动隐藏 结束 */

    </style>
  </head>

  <body class="flex col">
    <!--这是顶部导航-->
    <div
      class="flex baiSe"
      style="height: 80px; position: sticky; top: 0; z-index: 1;"
    >
      <!-- 这是左侧标题 -->
      <div
        class="flex"
        style="
          font-size: 18px;
          line-height: 80px;
          width: 400px;
          text-indent: 2em;
        "
      >
        要性青年
      </div>
      <!-- 这是右侧菜单 -->
      <div
        class="flex"
        style="align-items: center"
      >
        <div class="daoHang"><a href="#">首页</a></div>
        <div class="daoHang"><a href="#">圆桌会</a></div>
        <div class="daoHang"><a href="#">兴趣爱好</a></div>
        <div id="jindushuzi"><a href="#">人生进度 30%</a></div>
        <div class="loader"></div>
        <div class="g-container">
          <div class="g-first"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
          <div class="g-ball"></div>
        </div>
      </div>
    </div>
    <!--这是名片区-->
    <div
      class="flex"
      style="
        background-color: #4870ff;
        height: 350px;
        justify-content: space-around;
        align-items: center;
      "
    >
      <div style="text-align: center">
        <div>
          <img
            width="200px"
            height="200px"
            style="margin: 10px; border-radius: 50%"
            src="https://img1.imgtp.com/2022/12/11/U2zKaWfo.png"
            alt=""
          />
        </div>
        <div style="color: white; font-size: 20px">希德 Sid</div>
      </div>
      <div>
        <dl>
          <dd style="color: white; font-size: 30px">体育&健身</dd>
          <dd style="color: white; font-size: 14px">Sports & Bodybuilding</dd>
          <br /><br />
          <dd style="color: white; font-size: 30px">产品&思考</dd>
          <dd style="color: white; font-size: 14px">Product & Thinking</dd>
        </dl>
      </div>
    </div>
    <!--这是数据区-->
    <div
      class="flex"
      style="
        justify-content: space-around;
        margin: 0;
        padding: 60px;
        background-color: #f9f9f9;
      "
    >
      <div class="flex col">
        <div class="flex bai">
          <div class="data_num">1000</div>
          <div class="data_num_danwei">+</div>
        </div>
        <div
          class="con_title2"
          style="text-align: center"
        >
          社会经验值(天)
        </div>
      </div>
      <div class="flex col">
        <div class="flex">
          <div class="data_num">30</div>
          <div class="data_num_danwei">+</div>
        </div>
        <div
          class="con_title2"
          style="text-align: center"
        >
          写作累计值(篇)
        </div>
      </div>
      <div class="flex col">
        <div class="flex">
          <div class="data_num">200</div>
          <div class="data_num_danwei">+</div>
        </div>
        <div
          class="con_title2"
          style="text-align: center"
        >
          年均训练值(次)
        </div>
      </div>
    </div>
    <!--这是文章推荐-->
    <div
      class="con_title1"
      style="text-align: center"
    >
      文 章 推 荐
    </div>
    <div
      class="con_title2"
      style="text-align: center; margin-bottom: 20px"
    >
      Recommended Article
    </div>
    <div
      class="flex"
      style="justify-content: space-around"
    >
      <div class="flex col">
        <div class="flex">
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="flex">
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
          <div class="card">
            <a href="https://mp.weixin.qq.com/s/7unyW623Hz_-ztojwpnSYQ">
              <div class="content">
                <div class="front">
                  <h3 class="title">《圆桌会》招募简介 探讨职场问题</h3>
                </div>

                <div class="back">
                  <p
                    class="description"
                    style="color: white"
                  >
                    从“实际问题”为起点，结合方法论思考和探讨；以“解决问题”为终点，落地实践解决过程卡点
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!--这是亲生产品-->
    <div style="background-color: #3f66f6; margin-top:60px; padding-bottom: 60px; background-image: url(https://styd-frontend.oss-cn-shanghai.aliyuncs.com/images/www/styd/index/free-trial-bg.png);">
      <div
        class="con_title1"
        style="text-align: center; color: #fff;"
      >
        亲 生 产 品
      </div>
      <div
        class="con_title2"
        style="text-align: center; margin-bottom: 20px; color: #fff;"
      >
        Biological Son
      </div>
      <div
        class="flex"
        style="justify-content: space-evenly"
      >
        <div id="border-btn">
          <button style="width: 360px; height: 200px; font-size: 40px;">健身训练<p style="font-size: 15px; color:rgb(191, 191, 191); font-weight: 400;">风险筛查，健身规划，训练记录等</p></button>
        </div>
        <div id="border-btn">
          <button style="width: 360px; height: 200px; font-size: 40px;">体育协会<p style="font-size: 15px; color:rgb(191, 191, 191); font-weight: 400;">体育赛事，等级考试，平台商城等</p></button>
        </div>
        <div id="border-btn">
          <button style="width: 360px; height: 200px; font-size: 40px;">健身运营 <p style="font-size: 15px; color:rgb(191, 191, 191); font-weight: 400;">健身房运营管理SaaS系统</p> </button>
        </div>
      </div>
    </div>
    <!--这是兴趣爱好-->
    <div
    class="con_title1"
    style="text-align: center;"
  >
    兴 趣 爱 好
  </div>
  <div
    class="con_title2"
    style="text-align: center; margin-bottom: 20px;"
  >
  Hobbies And Intersts
  </div>
  <div class="flex" style="text-align:center; justify-content:space-evenly; margin-top: 40px; ">
    <div class="baiSe" style="width: 600px; justify-content: space-around;">
      <div class="con_title3">NSCA-CPT</div>
      <div class="con_title2">美国体能协会认证，学习健身理论基础</div>
      <div><img width="400px" style="margin-top: 10px; margin-bottom: 40px;" src="https://pic.imgdb.cn/item/63955243b1fccdcd36fd2a5c.png" alt="">
      </div>
    </div>
    <div class="baiSe" style="width: 600px; justify-content: space-around;">
      <div class="con_title3">健身实践</div>
      <div class="con_title2">训练是一件令人享受的事情</div>
      <div><img width="300px" style="margin-top: 10px; margin-bottom: 40px;" src="https://pic.imgdb.cn/item/63955221b1fccdcd36fd0e11.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="flex" style="text-align:center; justify-content:space-evenly; margin-top: 40px; ">
    <div class="baiSe" style="width: 600px; justify-content: space-around;">
      <div class="con_title3">职场圆桌会</div>
      <div class="con_title2">探讨职场问题，打造正向环境</div>
      <div><img width="400px" style="margin-top: 10px; margin-bottom: 40px;" src="https://pic.imgdb.cn/item/63942ff3b1fccdcd366a9f72.png" alt="">
      </div>
    </div>
    <div class="baiSe" style="width: 600px; justify-content: space-around;">
      <div class="con_title3">定期输出</div>
      <div class="con_title2">有效输出思考才能形成能力增量</div>
      <div><img width="400px" style="margin-top: 10px; margin-bottom: 40px;" src="https://pic.imgdb.cn/item/63955f72b1fccdcd360fe2d9.png" alt="">
      </div>
    </div>
  </div>
<!-- 悬浮窗 -->
<div class="wapnone fk_service">
  <ul>
      <li>
          <div class="fk_service_consult_cont1" style="display: none;"> <span class="fk_service_triangle"></span> 在线咨询 </div>
      </li>
      <li class="fk_service_box fk_service_qr">
          <div class="fk_service_qr_cont"> <span class="fk_service_triangle"></span>
              <div class="fk_service_qrimg"> <span class="fk_service_qrimg_site"></span> 微信公众号 </div>
              <div class="fk_service_qrtext"><span>要性青年</span></div>
          </div>
      </li>
      <!-- 不需要图标的注释或删除即可 -->
      

      <li class="fk_service_box fk_service_upward" onclick="FkService.fk_upWard();" style="display: block;">
          <div class="fk_service_upward_cont"> <span class="fk_service_triangle"></span> <span> 返回顶部 </span> </div>
      </li>
  </ul>
</div>

<!-- 底部 -->
  <div style="width: 100%; height:40px; margin-top: 40px; background-color: #3f66f6; text-align: center; padding-top: 15px; color: #fff;">
    copyright@1995-2022 希德
  </div>

  </body>
</html>
